//面膜中心
import  Footer  from '../../components/footer/footer';
import axios from "axios"
import React, { Component } from 'react';
import {Link} from "react-router-dom" 
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';
import "./mask.scss"

class Mask extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            rxList:[],
            tjList:[],
            zcList:[]
         }
    }
    componentDidMount() {
        axios.get("/item/ws/group_list?current_page=1&page_size=12&group_id=37222&device_id=cad861f0-a7c0-11eb-9b53-8528537369c7").then((res)=>{
            // console.log(res.data.data.item_list)
            this.setState({rxList:res.data.data.item_list})
        })
        axios.get("/item/ws/group_list?current_page=1&page_size=12&group_id=37223&device_id=cad861f0-a7c0-11eb-9b53-8528537369c7").then((res)=>{
            // console.log(res.data.data.item_list)
            this.setState({tjList:res.data.data.item_list})
        })
        axios.get("/act/mop/beautylife/article/householdProducts?article_ids=52221,52214,52254,52128,52214,52128&device_id=cad861f0-a7c0-11eb-9b53-8528537369c7").then((res)=>{
            console.log(res.data.data.data)
            this.setState({zcList:res.data.data.data})
        })
        
    }
    componentWillUnmount() {
        this.setState(()=>{
            return;
        })
    }
    render() { 
        const {rxList,tjList,zcList}=this.state
        return ( 
            <div className="mask">
                <div className="mask_pic">
                    <img src="https://image.watsons.com.cn//upload/b4e1ae37.jpg?x-oss-process=image/quality,q_80/format,webp" alt=""/>
                </div>
            <div className="hufu">
            <img src="https://image.watsons.com.cn//upload/e67776c4.jpg" alt="tupian"/>
                  <Link to="/list">  <div style={{backgroundColor:"pink"}}></div></Link>
                  <Link to="/list">  <div style={{backgroundColor:"pink"}}></div></Link>
                  <Link to="/list">  <div style={{backgroundColor:"pink"}}></div></Link>
            </div>
            <div>
                <div className="mask_pic">
                <img src="https://image.watsons.com.cn//upload/2af1895c.png?x-oss-process=image/quality,q_80/format,webp" alt=""/>
               </div>
               <ul className="mask_m">
                    {
                        rxList.map((item,index)=><li key={item.item_id}><Link to={{pathname:"/item",state:item}}>
                            <div className="pic"><img src={item.over_image_url} alt=""/></div>
                            <div className="name">{item.item_short_name}</div>
                            <div className="price"><span>￥{item.max_price/100}</span><img src="https://wstimg-dev.oss-cn-hangzhou.aliyuncs.com/upload/8f48b66a.png"  alt=""/></div>
                            </Link>
                        </li>)
                    }
                </ul>
            </div>
            <div>
                <div className="mask_pic">
                <img src="https://image.watsons.com.cn//upload/ffdd004a.jpg?x-oss-process=image/quality,q_80/format,webp" alt=""/>
               </div>
               <ul className="mask_m">
                    {
                        tjList.map((item,index)=><li key={item.item_id}><Link to={{pathname:"/item",state:item}}>
                            <div className="pic"><img src={item.over_image_url} alt=""/></div>
                            <div className="name">{item.item_short_name}</div>
                            <div className="price"><span>￥{item.max_price/100}</span><img src="https://wstimg-dev.oss-cn-hangzhou.aliyuncs.com/upload/8f48b66a.png"  alt=""/></div>
                            </Link>
                        </li>)
                    }
                </ul>
            </div>
            <div>
                <div>种草指南</div>
                <div>
                        <Swiper
                            spaceBetween={30}
                            slidesPerView={2.3}
                            onSlideChange={() => console.log('slide change')}
                            onSwiper={(swiper) => console.log(swiper)}
                        >
                            {
                                zcList.map((item,index)=><SwiperSlide key={index}>
                                    <div className="zcitem">
                                        <img src={item.item_image} alt=""/>
                                        <div className="titile">{item.title}</div>
                                        <div className="user">
                                            <img src={item.ba_user_dto.avatar} alt=""/>
                                            <div className="dto"></div>
                                            <span>{item.ba_user_dto.nick_name}{item.like_count}</span>
                                        </div>
                                    </div>

                                </SwiperSlide>)
                            }
                        </Swiper>
                </div>
            </div>
            

            <Footer></Footer>
            </div>
         );
    }
}
 
export default Mask;